stylelint-config-standard

What is stylelint-config-standard?

The stylelint-config-standard package is an extensible shared configuration for Stylelint, which is a mighty, modern linter that helps you avoid errors and enforce conventions in your styles. It is considered the standard configuration for Stylelint, providing a sensible default configuration that enforces common stylistic conventions for CSS.

What are stylelint-config-standard's main functionalities?

Extensible Configuration

This package provides a base set of rules for Stylelint, which can be extended in a project's .stylelintrc configuration file. By extending stylelint-config-standard, you inherit a standard set of rules that can be customized further.

{
  "extends": "stylelint-config-standard"
}

Enforce Stylistic Conventions

The package enforces stylistic conventions such as lowercase hex colors, indentation levels, and leading zeros in numbers. These rules help maintain consistency across your project's stylesheets.

{
  "rules": {
    "color-hex-case": "lower",
    "indentation": 2,
    "number-leading-zero": "always"
  }
}

Customizable Rules

While it provides a standard set of rules, it also allows for customization. Developers can override or extend the rules to fit their project's specific needs, such as allowing certain at-rules that are not part of CSS specifications but are used by preprocessors.

{
  "extends": "stylelint-config-standard",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": ["extends", "ignores"]
    }]
  }
}

Other packages similar to stylelint-config-standard

stylelint-config-recommended

This package is a lighter version of the standard configuration, focusing on possible error rules rather than stylistic rules. It's a good starting point for projects that want to enforce error checking without imposing stylistic choices.

stylelint-config-sass-guidelines

This package extends stylelint-config-standard and adds rules specific to Sass, such as those for nesting depth, name formats, and other conventions. It's tailored for projects that use Sass and want to adhere to common guidelines.

stylelint-prettier

This package integrates Stylelint with Prettier, an opinionated code formatter. It disables all rules that might conflict with Prettier, allowing developers to use Stylelint for linting and Prettier for formatting.

README

stylelint-config-standard

The standard shareable config for stylelint.

Use it as is or as a foundation for your own config.

It is derived from the common rules found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Github's PrimerCSS Guidelines, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.

It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.

To see the rules that this config uses, please read the config itself.

Example

@import url(x.css);
@import url(y.css);

/**
 * Multi-line comment
 */

.selector-1,
.selector-2,
.selector-3[type="text"] {
  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
  box-sizing: border-box;
  display: block;
  color: #333;
}

.selector-a,
.selector-b:not(:first-child) {
  padding: 10px !important;
  top: calc(calc(1em * 2) / 3);
}

.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }

/* Single-line comment */

@media (min-width >= 60em) {
  .selector {
    /* Flush to parent comment */
    transform: translate(1, 1) scale(3);
  }
}

@media (orientation: portrait), projection and (color) {
  .selector-i + .selector-ii {
    background: color(rgb(0, 0, 0) lightness(50%));
    font-family: helvetica, "arial black", sans-serif;
  }
}

/* Flush single line comment */
@media
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
  .selector {
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent,
        #fff 25px,
        rgba(255, 255, 255, 1) 50px
      );
    margin: 10px;
    margin-bottom: 5px;
    box-shadow:
      0 1px 1px #000,
      0 1px 0 #fff,
      2px 2px 1px 1px #ccc inset;
    height: 10rem;
  }

  /* Flush nested single line comment */
  .selector::after {
    content: '→';
    background-image: url(x.svg);
  }
}

Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features.

Installation

npm install stylelint-config-standard --save-dev

Usage

If you've installed stylelint-config-standard locally within your project, just set your stylelint config to:

{
  "extends": "stylelint-config-standard"
}

If you've globally installed stylelint-config-standard using the -g flag, then you'll need to use the absolute path to stylelint-config-standard in your config e.g.

{
  "extends": "/absolute/path/to/stylelint-config-standard"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the indentation to tabs, turn off the number-leading-zero rule, change the property-no-unknown rule to use its ignoreAtRules option and add the unit-whitelist rule:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": "tab",
    "number-leading-zero": null,
    "property-no-unknown": [ true, {
      "ignoreProperties": [
        "composes"
      ]
    }],
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Suggested additions

stylelint-config-standard is a great foundation for your own config. You can extend it create a tailored and much stricter config:

• Specify what quotes must be used using:
  • font-family-name-quotes
  • function-url-quotes
  • selector-attribute-quotes
  • string-quotes
• If you use autoprefixer you'll want to disallow vendor prefixes using:
  • at-rule-no-vendor-prefix
  • media-feature-name-no-vendor-prefix
  • property-no-vendor-prefix
  • selector-no-vendor-prefix
  • value-no-vendor-prefix
• Control specificity using:
  • max-nesting-depth
  • selector-max-compound-selectors
  • selector-max-specificity
• Specify acceptable selector types, units, properties, functions and words in comments using:
  • at-rule-blacklist
  • at-rule-no-unknown
  • at-rule-whitelist
  • color-named
  • color-no-hex
  • comment-word-blacklist
  • declaration-no-important
  • declaration-property-unit-blacklist
  • declaration-property-unit-whitelist
  • declaration-property-value-blacklist
  • declaration-property-value-whitelist
  • function-blacklist
  • function-url-scheme-whitelist
  • function-whitelist
  • media-feature-name-blacklist
  • media-feature-name-whitelist
  • property-blacklist
  • property-whitelist
  • selector-attribute-operator-blacklist
  • selector-attribute-operator-whitelist
  • selector-no-attribute
  • selector-no-combinator
  • selector-no-id
  • selector-no-qualifying-type
  • selector-no-type
  • selector-no-universal
  • selector-pseudo-class-blacklist
  • selector-pseudo-class-whitelist
  • unit-blacklist
  • unit-whitelist
• Specify acceptable naming patterns using:
  • custom-media-pattern
  • custom-property-pattern
  • selector-class-pattern
  • selector-id-pattern
  • selector-nested-pattern
• Specify a notation when there are one or more valid representations using:
  • font-weight-notation
• Specify what types of URLs are allowed using:
  • function-url-data-uris
  • function-url-no-scheme-relative
• Specify a maximum line length using:
  • max-line-length

Using the config with SugarSS syntax

The config is broadly compatible with SugarSS syntax. You will need to turn off the rules that check braces and semicolons, as so:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "block-closing-brace-empty-line-before": null,
    "block-closing-brace-newline-after": null,
    "block-closing-brace-newline-before": null,
    "block-closing-brace-space-before": null,
    "block-opening-brace-newline-after": null,
    "block-opening-brace-space-after": null,
    "block-opening-brace-space-before": null,
    "declaration-block-semicolon-newline-after": null,
    "declaration-block-semicolon-space-after": null,
    "declaration-block-semicolon-space-before": null,
    "declaration-block-trailing-semicolon": null
  }
}

Changelog

License

Changelog

16.0.0

• Changed: replaced the deprecated rule-nested-empty-line-before and rule-non-nested-empty-line-before rules with the rule-empty-line-before rule.